<template>
	<view class="container">
		<uni-icons type="back" size="30" @click="back"></uni-icons>
		<view class="top">
			<text class="title">注册</text>
		</view>

		<view class="input">
			<uni-easyinput v-model="userinfo.name" placeholder="请输入用户名" :styles="styles[0]" @focus="come(0)"
				@blur="leave(0)" class="input-item" @input="add1" />
			<uni-easyinput v-model="userinfo.phone" placeholder="请输入手机号" :styles="styles[1]" @focus="come(1)"
				@blur="leave(1)" class="input-item" @input="add2" />
			<uni-easyinput v-model="userinfo.password" placeholder="请输入密码" type="password" :styles="styles[2]"
				@focus="come(2)" @blur="leave(2)" class="input-item" @input="add3" />
		</view>

		<view class="bottom">
			<button @click="register">点击注册</button>
		</view>

		<view>
			<uni-popup :ref="message" type="message">
				<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	function add1(e) {
		userinfo.name = e
	}

	function add2(e) {
		userinfo.phone = e
	}

	function add3(e) {
		userinfo.password = e
	}

	const userinfo = reactive({
		name: '',
		phone: '',
		password: ''
	})

	const message = ref('message')
	const messageText = ref('')

	function back() {
		uni.navigateBack();
	}

	const styles = reactive([{
		borderColor: ''
	}, {
		borderColor: ''
	}, {
		borderColor: ''
	}])

	function come(index) {
		styles[index].borderColor = '#000'
	}

	function leave(index) {
		styles[index].borderColor = ''
	}

	function register() {
		if (userinfo.name == '' || userinfo.phone == '' || userinfo.password == '') {
			messageText.value = '请填入完整信息'
			message.value.open()
		} else {
			uni.request({
				url: 'http://localhost:8080/user',
				method: 'POST',
				data: {
					name: userinfo.name,
					phone: userinfo.phone,
					password: userinfo.password
				},
				success: res => {
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					});
				},
				fail: () => {
					uni.showToast({
						title: '注册失败',
						icon: 'none'
					});
				},
				complete: () => {}
			});
		}
	}
</script>

<style>
	.container {
		padding: 10% 5% 10% 5%;
		position: relative;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
	}

	.input {
		margin: 10% 4% 5% 0;
	}

	.input-item {
		padding: 10rpx;
		margin-top: 5%;
		border: 3rpx solid #000;
		border-radius: 10rpx;
	}

	button {
		background-color: #000;
		color: #fff;
		border: none;
		padding: 15rpx 30rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
	}
</style>